<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
 
 <style type="text/css">
  td{
    white-space:nowrap;
    overflow:hidden;
    word-break:keep-all;
   }

</style>
  <div class="card">
    <div class="card-header"><h4>资料信息</h4></div>
    <div class="card-body">
        <div class='row'>
          <div class="controls col-sm-2">
            <select class="form-control" id='fl'>
              <option value=''>清选择</option>
              <option value='10'>人物</option>
              <option value='20'>建筑</option>
              <option value='30'>艺术</option>
            </select>
          </div>
          <div class="controls col-sm-2">
            <select class="form-control" id='shbz'>
              <option value=''>资料审核</option>
              <option value='N'>未审核</option>
              <option value='Y'>已审核</option>
            </select>
          </div>
          <div class="form-group col-sm-2">
            <input class="form-control" type="text" id="country" name="country" placeholder="国家">
          </div>
          <div class="form-group col-sm-2">
            <input class="form-control" type="text" id="need_name" name="need_name" placeholder="名称" >
          </div>
          <div class="form-group col-sm-2">
            <input class="form-control" type="number" id="rqq" name="rqq" placeholder="日期起" >
          </div>
          <div class="form-group col-sm-2">
            <input class="form-control" type="number" id="rqz" name="rqz" placeholder="日期止">
          </div>
          <div class="form-group col-sm-3">
            <button class="btn btn-info btn-w-md" type="button" id='query_data'>查   询</button>
          </div>
   
        </div>

        <div class="row">

              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          <h4 class="modal-title" id="exampleModalLabel">信息修改</h4>
                        </div>
                        <div class="modal-body">
    
                  <form>
                    <div class="row">
                          <div>
                                <div class="control-group col-sm-12">
                                    <div class="controls">
                                      <label class="control-label">单据号</label>
                                      <input type="text"  id ='xg_uuid' class="form-control"  readonly="readonly">
                                      <p class="help-block"></p>
                                    </div>
                                  </div>


                                 <div class="control-group col-sm-3">
                                    <div class="controls">
                                    <label class="control-label">类别</label>
                                      <select class="form-control" id='xg_fl'>
                                        <option value="10">人物</option>
                                        <option value="20">建筑</option>
                                        <option value="30">艺术</option>
                                      </select>
                                    </div>
                                  </div>

                                 <div class="control-group col-sm-6">
                                    <div class="controls">
                                      <label class="control-label">国家</label>
                                      <input type="text" placeholder="国家" id ='xg_gj' maxlength="11" class="form-control">
                                      <p class="help-block"></p>
                                    </div>
                                  </div>


                                  <div class="control-group col-sm-4">
                                    <div class="controls">
                                      <label class="control-label">名称</label>
                                      <input type="text" placeholder="人名，建筑名，艺术品名" id='xg_name' maxlength="20" class="form-control input-xlarge search-query">
                                    </div>
                                  </div>

                                  <div class="control-group col-sm-4">
                                    <label class="control-label" for="input01">日期起</label>
                                    <div class="controls">
                                      <input type="number" placeholder="填数字，公元前‘-’号表示" id = 'xg_rqq'  class="form-control">
                                    </div>
                                  </div>


                                  <div class="control-group col-sm-4">
                                    <label class="control-label" for="input01">日起止</label>
                                    <div class="controls">
                                      <input type="number" placeholder="填数字，公元前‘-’号表示" id = 'xg_rqz'  class="form-control">
                                    </div>
                                  </div>
                              
                                 <div class="control-group col-sm-12">
                                    <label class="control-label">简介</label>
                                    <div class="controls">
                                      <div class="textarea">
                                            <textarea type="" id = 'xg_intro' class="form-control" style="height: 150px;resize: none;"> </textarea>
                                      </div>
                                    </div>
                                  </div>


                                  <div class="control-group col-sm-12">
                                    <label class="control-label">详细信息</label>
                                    <div class="controls">
                                      <div class="textarea">
                                            <textarea type="" class="form-control" id = 'xg_xxxx' style="height: 250px;resize: none;"> </textarea>
                                      </div>
                                    </div>
                                  </div>
                          </div>
                        </div>
                  </form>

                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                          <button type="button" class="btn btn-primary" id='btn_update'>提交保存</button>
                        </div>
                      </div>
                    </div>
                  </div>
        <div class="col-sm-8">
              
          <div style="height:600px;overflow:auto">
            <table class ='table-striped' id="table"></table>
          </div>
        </div>


        <div class="col-sm-4">

        <div>
                 <div class="control-group">
                      <!-- Search input-->
                      <div class="controls thumbnail">
                          <img src="" id='img'>
                      </div>

                   </div>

            
            <div class="control-group">

                  <!-- Textarea -->
                  <label class="control-label">简介</label>
                  <div class="controls">
                    <div class="textarea">
                          <textarea type="" class="form-control" id = 'dic_info' style="height: 100px;resize: none;"> </textarea>
                    </div>
                  </div>
                </div><div class="control-group">

                  <!-- Textarea -->
                  <label class="control-label">摘要</label>
                  <div class="controls">
                    <div class="textarea">
                          <textarea type="" class="form-control"  id = 'intro' style="height: 200px;resize: none;"> </textarea>
                    </div>
                  </div>
                </div>

        </div>

        </div>


    </div>
  </div>


 <script src="static/js/bootstrap-table.min.js"></script>
 <script src="static/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
                    // 初始化表格
                 let xxid='';
                 initTable();
                });

                function initTable() {
                        var t = $("#table").bootstrapTable({
                        url: '/get_hzxx',
                        method: 'get',
                        dataType: "json",
                        striped: true,//设置为 true 会有隔行变色效果
                        undefinedText: "空",//当数据为 undefined 时显示的字符
                        pagination: true, //分页
                //      paginationLoop:true,//设置为 true 启用分页条无限循环的功能。
                //      showToggle: "true",//是否显示 切换试图（table/card）按钮
                //      showColumns: "true",//是否显示 内容列下拉框
                        pageNumber: 1,//如果设置了分页，首页页码
                //      showPaginationSwitch:true,//是否显示 数据条数选择框
                        pageSize: 10,//如果设置了分页，页面数据条数
                        pageList: [5, 10, 20, 40],  //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
                        paginationPreText: '<<',//指定分页条中上一页按钮的图标或文字,这里是<
                        paginationNextText: '>>',//指定分页条中下一页按钮的图标或文字,这里是>
                //      singleSelect: false,//设置True 将禁止多选
                        search: true, //显示搜索框
                        //data_local: "zh-US",//表格汉化
                        sidePagination: "client", //服务端处理分页
                        queryParams: queryParams,//将返回的值赋值给table插件的属性
                        responseHandler:function(res){
                            return{
                                "total":res.total,
                                "rows": res.rows,
                            }
                        },
                        idField: "uuid",//指定主键列
                        columns: [{
                                    field:'need_name',
                                    title:'名称'
                                },{
                                    field:'country',
                                    title:'国家'
                                },{
                                    field:'rqq',
                                    title:'日期起'
                                },{
                                    field:'rqz',
                                    title:'日期止'

                                },{
                                    title: '操作',          
                                    align: 'center',
                                    formatter: function (value, records, index) {

                                        let html= ''
                                        
                                          html = '<a href=javascript:deletebyid(' + '"'+records.uuid+'#'+index+ '"' + ') class="btn btn-danger btn-sm" >删除</a>  <a href=javascript:updatebyid(' + '"'+records.uuid+ '"' + ') class="btn btn-info btn-sm">修改</a>  <a href=javascript:comfirbyid(' + '"'+records.uuid+ '"' + ') class="btn btn-success btn-sm" >审核</a> '
                                                                                
                                        return html
                                    }
                                }
                                ],
                                //表格行双击事件
                               onDblClickRow:function(row, $element, field){
                                     xxid = row.uuid
                                     img_url ='static/images/'+xxid+'.jpg'

                                     $('#dic_info').val(row.dic_info)
                                     $('#intro').val(row.intro)
                                     $('#img').attr('src',img_url);

                              }
                    });
                };

        //分页查询参数，是以键值对的形式设置的
        function queryParams(params) {
                params.fl= $('#fl').val();// 请求时向服务端传递的参数
                params.country=$('#country').val();
                params.need_name=$('#need_name').val();
                params.shbz =$('#shbz')?$('#shbz').val():'N';
                params.rqq=$('#rqq').val()?$('#rqq').val():-3000;
                params.rqz =$('#rqz').val()?$('#rqz').val():3000;

            return  params

            
        }

        // 搜索按钮触发事件
        $("#query_data").click(function() {
              $('#table').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
        });


        //点击删除按钮触发的事件
        function deletebyid(index){

             let uuid = index.split('#')[0]
             let tr_id = index.split('#')[1]
             r = confirm("确定要删除吗？")
             if (r == false){
                return
             }
                  $.ajax({
                      "url":"/hzxx_delete",
                      "async" : true,
                      "dataType":'json',
                      "data":{'uuid':uuid},
                      "type" : "post",
                      "success":function (data) {
                        
                          alert(data.mes)
                          $('#table').bootstrapTable(('refresh'));

                      },    
                      "error":function (res) {  
                          alert(res)
                      } 
                     });
        }
//修改信息
   function updatebyid(uuid){
          $.ajax({
            //请求方式
                type : "GET",
                //数据类型
                dataType: 'json',
                //请求地址
                url : "/post_getOne",
                //数据，json字符串
                data : {'uuid':uuid},
                //请求成功
                success : function(data) {
                    let rs = data[0]
                    $('#xg_uuid').val(rs.uuid)
                    $('#xg_fl').val(rs.fl);
                    $('#xg_name').val(rs.need_name);
                    $('#xg_gj').val(rs.country);
                    $('#xg_rqq').val(rs.rqq);
                    $('#xg_rqz').val(rs.rqz);
                    $('#xg_intro').val(rs.intro);
                    $('#xg_xxxx').val(rs.detail);
                    $('#exampleModal').modal('show')

                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    alert(e)
                }
            });

          
   }

//修改提交
     $('#btn_update').click(function(){
              uuid = $('#xg_uuid').val()
              gj   = $('#xg_gj').val()
              fl   = $('#xg_fl').val()
              name = $('#xg_name').val()
              rqq  = $('#xg_rqq').val()
              rqz  = $('#xg_rqz').val()
              intro= $('#xg_intro').val()
              xxxx = $('#xg_xxxx').val()

              if(rqq=='' || rqz=='' || name=='' || intro=='' || gj ==''){
                alert('信息不能为空！')
                return 
              }

                let list = {
                  'gj'  : gj,
                  'fl'  : fl,
                  'name': name,
                  'rqq' : rqq,
                  'rqz' : rqz,
                  'intro': intro,
                  'xxxx': xxxx,
                  'uuid':uuid
                 }
           
                 $.ajax({
                  //请求方式
                      type : "POST",
                      //数据类型
                      dataType: 'json',
                      //请求地址
                      url : "/hzxx_update",
                      //数据，json字符串
                      data : list,
                      //请求成功
                      success : function(rs) {
                          alert(rs.mes)
                          $('#exampleModal').modal('hide')
                          $('#table').bootstrapTable(('refresh'));
                      },
                      //请求失败，包含具体的错误信息
                      error : function(e){
                          alert(e)
                      }
                  });

          });
//一键审核资料
     function comfirbyid(uuid){
       
        $.ajax({
                  //请求方式
            type : "POST",
            //数据类型
            dataType: 'json',
            //请求地址
            url : "/hzxx_sh",
            //数据，json字符串
            data : {'uuid':uuid},
            //请求成功
            success : function(rs) {
                alert(rs.mes)
                $('#table').bootstrapTable(('refresh'));
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                alert(e)
            }
        });

     }

</script>




